<template>
  <view class="content">
    <view class="app-title ac">
      <view class="fl" @click="back"
        ><image class="back" src="/static/img/back.png"></image></view
      >备用设备台账
    </view>

    <view class="top-bg"></view>

    <view class="detail">
      <u-cell-group>
        <u-cell-item
          title="所在机构"
          :value="org == '' ? '请选择' : org"
          @click="
            show_picker = true;
            columns = org_options;
          "
        ></u-cell-item>
        <u-cell-item
          title="所在站"
          :value="station == '' ? '请选择' : station"
          @click="
            show_picker = true;
            columns = station_options;
          "
        ></u-cell-item>
        <u-cell-item
          title="设备类型"
          :value="type == '' ? '请选择' : type"
          @click="
            show_picker = true;
            columns = type_options;
          "
        ></u-cell-item>
        <view style="line-height: 60px"><b>设备列表</b></view>
        <u-cell-group
          v-for="(item, index) in list"
          :key="index"
          style="margin-bottom: 30px"
        >
          <u-cell-item
            title="所在机构"
            :value="item.orgName"
            :arrow="false"
          ></u-cell-item>
          <u-cell-item
            title="所在站"
            :value="item.stationCode"
            :arrow="false"
          ></u-cell-item>
          <u-cell-item
            title="上道设备类型"
            :value="item.equtype"
            :arrow="false"
          ></u-cell-item>
          <u-cell-item
            title="上道设备位置"
            :value="item.sdLocation"
            :arrow="false"
          ></u-cell-item>
          <u-cell-item
            title="器材型号"
            :value="item.eqtModelNum"
            :arrow="false"
          ></u-cell-item>
          <u-cell-item
            title="条形码"
            :value="item.zcCode"
            :arrow="false"
          ></u-cell-item>
          <u-cell-item
            title="器材上道时间"
            :value="item.sdTime"
            :arrow="false"
          ></u-cell-item>
          <u-cell-item
            title="备注"
            :value="item.note"
            :arrow="false"
          ></u-cell-item>
        </u-cell-group>
      </u-cell-group>
    </view>

    <button class="default-btn" @click="initList">查询</button>

    <view class="full" v-show="show_picker"></view>
    <u-select
      v-model="show_picker"
      :list="columns"
      label-name="text"
      @confirm="onConfirm"
      @cancel="onCancel"
    ></u-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      org_options: "",
      type_options: "",
      station_options: "",
      columns: [],
      list: [
        {
          orgName: "sss",
          stationCode: "22",
          equtype: "sajk",
          sdLocation: "jj",
          eqtModelNum: "ws",
          zcCode: "22",
          sdTime: "099",
          note: "099",
        },
      ],
      data_list: {
        equTypeId: "", //设备类型id
        orgId: "", //机构id
        page: 0, //页数
        stationCode: "", //车站
      },
      org: "",
      station: "",
      type: "",
      flog: true,
      show_picker: false,
    };
  },
  created() {
    // this.initOrg();
  },
  onReachBottom() {
    if (!this.flog)
      return uni.showToast({ title: "已无最新数据", icon: "none" });
    // this.initList();
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    onConfirm(value, index) {
      if (value[0].extra.type == "org") {
        this.data_list.orgId = value[0].extra.id;
        this.org = value[0].label;
        this.getStation(value[0].extra.id);
      } else if (value[0].extra.type == "station") {
        this.data_list.stationCode = value[0].extra.code;
        this.station = value[0].label;
      } else if (value[0].extra.type == "type") {
        this.data_list.equTypeId = value[0].extra.id;
        this.type = value[0].label;
      }
      this.onCancel();
      // if(index == 0) uni.navigateTo({url: '/pages/device/deiveAttr'});
      // if(index == 1) uni.navigateTo({url: '/pages/alarm/historyAlarm'});
    },
    onCancel() {
      this.show_picker = false;
    },
    initOrg() {
      this.fetch("GET", this.baseUrl() + "/home/getOrgTreeByPerson", {
        personId: this.getUserId(),
      }).then((res) => {
        if (res.returnCode == 1) {
          this.org_options = res.data;
          this.org_options.map((item) => {
            item.children = "";
            item.extra = { type: "org", id: item.id };
          });
        }
      });
      this.fetch("GET", this.baseUrl() + "/home/queryEqtTypeTree2", {}).then(
        (res) => {
          if (res.returnCode == 1) {
            this.type_options = res.data;
            this.type_options.map((item) => {
              item.extra = { type: "type", id: item.id };
            });
          }
        }
      );
    },
    getStation(id) {
      this.fetch("GET", this.baseUrl() + "/home/getStations", {
        orgid: id,
      }).then((res) => {
        if (res.returnCode == 1) {
          this.station_options = res.data;
          this.station_options.map((item) => {
            item.text = item.NAME;
            item.extra = { type: "station", code: item.CODE };
          });
        }
      });
    },
    initList() {
      this.fetch(
        "GET",
        this.baseUrl() + "/eqtTZcController/queryEqtPrepareUse",
        this.data_list,
        true
      ).then((res) => {
        if (res.returnCode == 1) {
          this.list = this.list.concat(res.data.content);
          this.data_list.page++;
          if (res.data.content.length != 10) this.flog = false;
        }
      });
    },
  },
};
</script>

<style scoped>
.detail {
  height: auto;
}
.default-btn {
  width: 91.5%;
  margin: 20px auto;
}
.van-cell__value {
  text-align: right;
  color: #3e3a39;
}
.van-cell {
  padding: 13px 16px;
}
</style>
